<template>
    <BaseEcharts :options="options" :styleConfig="{ width: '300px', height: '300px' }" />
</template>

<script lang="ts" setup>
interface Item {
    name: string;
    value1: number;
    value2: number;
}
const props = defineProps({
    data: {
        type: Array<Item>,
        required: true
    }
});
const options = ref();
watchEffect(() => {
    options.value = {
        toolbox: {
            show: true, //展示工具栏
            itemSize: 20, //icon的大小
            iconStyle: {
                borderColor: '#409eff',
                borderWidth: '3',
                color: '#fff'
            },
            right: '40px', //偏移位置
            feature: {
                saveAsImage: {
                    title: '下载图表', //鼠标滑过之后文案
                    name: '我的图表' //图表名称
                }
            }
        },
        title: {
            text: '使用示例',
            subtext: '二级标题',
            subTextStyle: {
                fontSize: 16,
                fontWeight: 'normal',
                left: 'center',
                y: 'center'
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    width: 1,
                    color: '#008000'
                }
            }
        },
        grid: {
            left: '1%',
            right: '1%',
            bottom: '1%',
            top: '60px',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: props.data.map((item) => item.name),
            axisLabel: {
                interval: 0,
                rotate: 30
            }
        },
        yAxis: {
            axisLabel: {
                formatter: (val: number) => {
                    return val;
                }
            }
        },
        series: [
            {
                name: '收入',
                type: 'bar',
                stack: 'Total',
                data: props.data.map((item) => item.value1)
            },
            {
                name: '支出',
                type: 'line',
                stack: 'Total',
                data: props.data.map((item) => item.value2)
            }
        ]
    };
});
</script>
